<template>
    <div class="app-container">
        <el-tabs v-model="activeName" v-if="showCard">
            <el-tab-pane label="产品下单提醒" name="first">
                <el-row :gutter="20">
                    <el-col :span="24" :xs="24">
                        <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" v-show="showSearch">
                            <el-form-item label="产品名称" prop="产品名称">
                                <el-input v-model="queryParams1.productName" placeholder="请输入产品名称" clearable
                                    @keyup.enter.native="handleQuery('first')" />
                            </el-form-item>
                            <el-form-item label="下单时间">
                                <el-date-picker type="daterange" v-model="queryParams.order_date" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" clearable style="width: 240px" />
                            </el-form-item>
                            <el-form-item label="订单号" prop="订单号">
                                <el-input v-model="queryParams1.orderId" placeholder="请输入订单号" clearable
                                    @keyup.enter.native="handleQuery('first')" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" size="mini"
                                    @click="handleQuery('first')">搜索</el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="1.5">
                                <el-button type="primary" plain icon="el-icon-plus" size="mini"
                                    @click="handleAddComm1">新增</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-table :data="orderDownProduct" v-loading="loading" @row-click="change_detail1">
                    <el-table-column prop="pro_name" label="产品名称"></el-table-column>
                    <el-table-column prop="pro_code" label="产品编号"></el-table-column>
                    <el-table-column prop="order_id" label="订单号" />
                    <el-table-column prop="order_date" label="下单日期"></el-table-column>
                    <el-table-column prop="order_man" label="客户"></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-delete"
                                @click="handleDelete(scope.row, 'first')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getList('first')" :total="totalProduct" />
            </el-tab-pane>
            <el-tab-pane label="订单上线提醒" name="second">
                <el-row :gutter="20">
                    <el-col :span="24" :xs="24">
                        <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" v-show="showSearch">
                            <el-form-item label="订单编号" prop="订单编号">
                                <el-input v-model="queryParams1.orderId" placeholder="请输入编号" clearable
                                    @keyup.enter.native="handleQuery('second')" />
                            </el-form-item>
                            <el-form-item label="订单上线时间" prop="订单上线时间">
                                <el-date-picker type="daterange" v-model="queryParams.orderOnlineTime" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" clearable style="width: 240px" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" size="mini"
                                    @click="handleQuery('second')">搜索</el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="1.5">
                                <el-button type="primary" plain icon="el-icon-plus" size="mini"
                                    @click="handleAddComm2">新增</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-table :data="orderDownOnline" v-loading="loading" @row-click="change_detail1">
                    <el-table-column prop="order_code" label="订单编号"></el-table-column>
                    <el-table-column prop="order_up_date" label="订单上线时间"></el-table-column>
                    <el-table-column prop="order_man" label="下单商家" />
                    <el-table-column prop="comment" label="备注"></el-table-column>
                    <el-table-column prop="order_re" label="订单要求"></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-delete"
                                @click="handleDelete(scope.row, 'second')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getList('second')" :total="totalOnline" />
            </el-tab-pane>
            <el-tab-pane label="辅料入库提醒" name="third">
                <el-row :gutter="20">
                    <el-col :span="24" :xs="24">
                        <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" v-show="showSearch">
                            <el-form-item label="辅料类别" prop="辅料类别">
                                <el-input v-model="queryParams1.materialType" placeholder="请输入辅料类别" clearable
                                    @keyup.enter.native="handleQuery('third')" />
                            </el-form-item>
                            <el-form-item label="辅料代码" prop="辅料代码">
                                <el-input v-model="queryParams1.inTime" placeholder="请输入辅料代码" clearable
                                    @keyup.enter.native="handleQuery('third')" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" size="mini"
                                    @click="handleQuery('third')">搜索</el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="1.5">
                                <el-button type="primary" plain icon="el-icon-plus" size="mini"
                                    @click="handleAddComm3">新增</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-table :data="orderDownMaterial" v-loading="loading" @row-click="change_detail1">
                    <el-table-column prop="fu_kind" label="辅料类别"></el-table-column>
                    <el-table-column prop="in_date" label="辅料代码"></el-table-column>
                    <el-table-column prop="in_num" label="辅料名称" />
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-delete"
                                @click="handleDelete(scope.row, 'third')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getList('third')" :total="totalMaterial" />
            </el-tab-pane>
        </el-tabs>
        <el-dialog :title="title1" :visible.sync="open1" width="1000px" append-to-body>
            <el-table :data="orderDownProduct1" v-loading="loading" @row-click="change_detail1">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="pro_name" label="产品名称"></el-table-column>
                <el-table-column prop="pro_code" label="产品编号"></el-table-column>
                <el-table-column prop="order_id" label="订单号" />
                <el-table-column prop="order_date" label="下单日期"></el-table-column>
                <el-table-column prop="order_man" label="客户"></el-table-column>
            </el-table>
            <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList('first')" :total="totalProduct" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="open1 = false">取消</el-button>
                <el-button type="primary" @click="saveForm('first')">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title2" :visible.sync="open2" width="1000px" append-to-body>
            <el-table :data="orderDownOnline1" v-loading="loading" @row-click="change_detail1">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="order_code" label="订单编号"></el-table-column>
                <el-table-column prop="order_up_date" label="订单上线时间"></el-table-column>
                <el-table-column prop="order_man" label="下单商家" />
                <el-table-column prop="comment" label="备注"></el-table-column>
                <el-table-column prop="order_re" label="订单要求"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row, 'second')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList('second')" :total="totalOnline" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="open2 = false">取消</el-button>
                <el-button type="primary" @click="saveForm('second')">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title3" :visible.sync="open3" width="1000px" append-to-body>
            <el-table :data="orderDownMaterial1" v-loading="loading" @row-click="change_detail1">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="fu_kind" label="辅料类别"></el-table-column>
                <el-table-column prop="in_date" label="辅料代码"></el-table-column>
                <el-table-column prop="in_num" label="辅料名称" />
                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row, 'third')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList('third')" :total="totalMaterial" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="open3 = false">取消</el-button>
                <el-button type="primary" @click="saveForm('third')">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pro_data1: [
                {
                    id: 1,
                    label: '全选',
                    children: [
                        { id: 2, label: '密胺餐盘' },
                        { id: 3, label: '密胺水杯' }
                    ]
                }
            ],
            order_data1: [
                {
                    id: 1,
                    label: '全选',
                    children: [
                        { id: 2, label: 'XN1' },
                        { id: 3, label: 'XN2' }
                    ]
                }
            ],
            fu_data1: [
                {
                    id: 1,
                    label: '全选',
                    children: [
                        { id: 2, label: '箱子' },
                        { id: 3, label: '盒子' }
                    ]
                }
            ],
            defaultProps: { children: 'children', label: 'label' },
            fu_data2: [
                {
                    id: 1,
                    label: '全选',
                    children: [
                        { id: 2, label: 'MQ1' },
                        { id: 3, label: 'MQ2' }
                    ]
                }
            ],
            fu_data3: [
                {
                    id: 1,
                    label: '全选',
                    children: [
                        { id: 2, label: '大箱子' },
                        { id: 3, label: '小碗' }
                    ]
                }
            ],
            open1: false,
            open2: false,
            open3: false,
            title1: '',
            title2: '',
            title3: '',
            activeName: 'first',
            showCard: true,
            showSearch: true,
            queryParams: { pageNum: 1, pageSize: 10 },
            queryParams1: {
                productName: '',
                orderId: '',
                orderOnlineTime: '',
                materialType: '',
                inTime: ''
            },
            orderDownProduct: [
                {
                    pro_name: '密胺餐盘',
                    pro_code: 'MP001',
                    order_id: 'OD001',
                    order_date: '',
                    order_man: '美食餐厅'
                },
                {
                    pro_name: '密胺水杯',
                    pro_code: 'MP002',
                    order_id: 'OD002',
                    order_date: '',
                    order_man: '咖啡屋'
                }
            ],
            orderDownProduct1: [
                {
                    pro_name: '密胺餐盘',
                    pro_code: 'MP01',
                    order_id: 'OD1',
                    order_date: '',
                    order_man: '美食餐厅'
                },
                {
                    pro_name: '密胺水杯',
                    pro_code: 'M02',
                    order_id: 'O02',
                    order_date: '',
                    order_man: '咖啡屋'
                }
            ],
            orderDownOnline: [
                {
                    order_code: 'OL001',
                    order_up_date: '2024-03-03',
                    order_man: '中餐厅',
                    comment: '加急订单',
                    order_re: '尽快发货'
                },
                {
                    order_code: 'OL002',
                    order_up_date: '2024-04-04',
                    order_man: '西餐厅',
                    comment: '正常订单',
                    order_re: '按时发货'
                }
            ],
            orderDownOnline1: [
                {
                    order_code: 'OL001',
                    order_up_date: '2024-03-07',
                    order_man: '中餐厅',
                    comment: '加急订单',
                    order_re: '尽快发货'
                },
                {
                    order_code: 'OL002',
                    order_up_date: '2024-04-08',
                    order_man: '西餐厅',
                    comment: '正常订单',
                    order_re: '按时发货'
                }
            ],
            orderDownMaterial: [
                {
                    fu_kind: '大箱子',
                    in_date: '2024-05-05',
                    in_num: 1000
                },
                {
                    fu_kind: '小盒子',
                    in_date: '2024-06-06',
                    in_num: 500
                }
            ],
            orderDownMaterial1: [
                {
                    fu_kind: '大箱子',
                    in_date: '2024-06-05',
                    in_num: 100
                },
                {
                    fu_kind: '小盒子',
                    in_date: '2024-06-08',
                    in_num: 50
                }
            ],
            loading: false,
            totalProduct: 2,
            totalOnline: 2,
            totalMaterial: 2,
            form_main1: {
                productname: '',
                productCode: '',
                contractNumber: '',
                date: '',
                contactPhone: ''
            },
            form_main2: {
                orderCode: '',
                orderOnlineTime: '',
                orderMan: '',
                comment: '',
                orderRe: ''
            },
            form_main3: {
                fuKind: '',
                inDate: '',
                inNum: ''
            },
            isDeleting: false
        };
    },
    methods: {
        handleAddComm1() {
            this.open1 = true;
            this.title1 = '选择需要提醒的下单产品';
            this.resetForm('form_main1');
        },
        handleAddComm2() {
            this.open2 = true;
            this.title2 = '选择需要上线提醒的订单';
            this.resetForm('form_main2');
        },
        handleAddComm3() {
            this.open3 = true;
            this.title3 = '选择需要提醒入库的辅料';
            this.resetForm('form_main3');
        },
        handleQuery(tabName) {
            console.log(`执行 ${tabName} 搜索操作`, this.queryParams1);
            this.getList(tabName);
        },
        resetQuery1() {
            this.queryParams1 = {
                productName: '',
                orderId: '',
                orderOnlineTime: '',
                materialType: '',
                inTime: ''
            };
            this.getList(this.activeName);
        },
        handleDelete(row, tabName) {
            this.isDeleting = true;
            console.log(`执行 ${tabName} 删除操作`, row);
            if (tabName === 'first') {
                this.orderDownProduct = this.orderDownProduct.filter(item => item.order_id!== row.order_id);
                this.totalProduct = this.orderDownProduct.length;
            } else if (tabName === 'second') {
                this.orderDownOnline = this.orderDownOnline.filter(item => item.order_code!== row.order_code);
                this.totalOnline = this.orderDownOnline.length;
            } else if (tabName === 'third') {
                this.orderDownMaterial = this.orderDownMaterial.filter(item => item.fu_kind!== row.fu_kind);
                this.totalMaterial = this.orderDownMaterial.length;
            }
            setTimeout(() => {
                this.isDeleting = false;
            }, 0);
        },
        change_detail1(row) {
            console.log('点击行数据', row);
        },
        getList(tabName) {
            console.log(`执行 ${tabName} 分页操作`);
        },
        resetForm(formRef) {
            this.$refs[formRef].resetFields();
        },
        saveForm(tabName) {
            console.log(`执行 ${tabName} 保存表单操作`);
            if (tabName === 'first') {
                this.orderDownProduct.push({
                    pro_name: this.form_main1.productname,
                    pro_code: this.form_main1.productCode,
                    order_id: this.form_main1.contractNumber,
                    order_date: this.form_main1.date,
                    order_man: this.form_main1.contactPhone
                });
                this.totalProduct = this.orderDownProduct.length;
                this.open1 = false;
            } else if (tabName === 'second') {
                this.orderDownOnline.push({
                    order_code: this.form_main2.orderCode,
                    order_up_date: this.form_main2.orderOnlineTime,
                    order_man: this.form_main2.orderMan,
                    comment: this.form_main2.comment,
                    order_re: this.form_main2.orderRe
                });
                this.totalOnline = this.orderDownOnline.length;
                this.open2 = false;
            } else if (tabName === 'third') {
                this.orderDownMaterial.push({
                    fu_kind: this.form_main3.fuKind,
                    in_date: this.form_main3.inDate,
                    in_num: parseInt(this.form_main3.inNum)
                });
                this.totalMaterial = this.orderDownMaterial.length;
                this.open3 = false;
            }
        }
    },
    watch: {
        orderDownProduct: {
            handler(newVal, oldVal) {
                const oldVal1 = JSON.parse(JSON.stringify(this.orderDownProduct.slice(0,-1)))
                if (!this.isDeleting && newVal.length > oldVal1.length) {
                    setTimeout(() => {
                        alert('产品下单提醒有新数据添加！');
                    }, 2000);
                }
            },
            deep: true,
            immediate: false
        },
        orderDownOnline: {
            handler(newVal, oldVal) {
                const oldVal2 = JSON.parse(JSON.stringify(this.orderDownOnline.slice(0,-1)))
                if (!this.isDeleting && newVal.length > oldVal2.length) {
                    setTimeout(() => {
                        alert('订单上线提醒有新数据添加！');
                    }, 2000);
                }
            },
            deep: true,
            immediate: false
        },
        orderDownMaterial: {
            handler(newVal, oldVal) {
                const oldVal3 = JSON.parse(JSON.stringify(this.orderDownMaterial.slice(0,-1)))
                if (!this.isDeleting && newVal.length > oldVal3.length) {
                    setTimeout(() => {
                        alert('辅料入库有新数据添加！');
                    }, 2000);
                }
            },
            deep: true,
            immediate: false
        }
    }
};
</script>    

<style scoped>
/* 可添加样式 */
</style>